<template>
  <Lazy :isLoading="isLoading" :finish="finish" @lazyHtppHandle="getArticleList">
    <ul>
      <li v-for="(item, index) in articleList" :key="item._id" class="articleItem" @click="goDetails(item._id || '')">
        <div class="articleBg" :class="FloatFn(index)">
          <div v-preview="store.getGetPreviewImg()" v-origin="store.state.BaseUrl + item.bg"></div>
        </div>
        <div class="articleInfo" :class="FloatFn(index)">
          <a>{{ item.title }}</a>
          <div>
            <p class="info">{{ delImageInfo(item.info) }}</p>
            <p class="flagIcon">
              <span>
                <i class="fa fa-hourglass articleIcon" aria-hidden="true"></i>
                {{
                  dayjs(Number(item.createTime)).format('YYYY-MM-DD HH:mm:ss')
                }}</span>
              &emsp;
              <span class="articleType">
                <i class="fa fa-bookmark articleIcon" aria-hidden="true"></i>
                {{ item.articleType }}
              </span>
              &ensp;
              <span>{{ (item.info && setCount(item.info)) || 0 }}字 </span>
            </p>
          </div>
        </div>
      </li>
    </ul>
  </Lazy>
</template>
<script lang="ts" setup>
import Lazy from '../global/Lazy.vue'
import { ref, nextTick, watch, inject } from 'vue'
import { getArticleData } from '@/utils/http/articleHttp'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
// 列表左右浮动
const FloatFn = (index: number) => {
  return index % 2 ? 'floatR' : 'floatL'
}

// 显示文本内容
const delImageInfo = (info: string | undefined) => {
  const div = document.createElement('div')
  div.innerHTML = info || ''
  let str = div.innerText
  div.remove()
  return str
}
//  计算字
const setCount = (info: string) => {
  let count = delImageInfo(info).length
  return count > 1000 ? (count / 1000).toFixed(2) + '千' : count
}

// 导入全局状态
const store: any = inject('store')
type articleList = {
  articleType?: string
  bg?: string
  createTime?: string
  info?: string
  title?: string
  _id?: string
}
const props = defineProps<{
  articleWhere: articleList
}>()
// 获取文章内容
let page: number = 1
// 是否正在加载
const isLoading = ref<boolean>(false)
// 是否加载完成
const finish = ref<boolean>(true)
// 文章数据
const articleList = ref<articleList[]>([])

// 获取文章列表
async function getArticleList() {
  isLoading.value = true

  // 请求数据
  let res = await getArticleData(page++, JSON.stringify(props.articleWhere))
  // 把数据放入数组
  articleList.value.push(...(res.data.info.data as []))
  // 判断是否请求所有的数据
  finish.value = res.data.info.num <= articleList.value.length

  nextTick(() => {
    isLoading.value = false
  })
}
// 前往详情页
const router = useRouter()
const goDetails = (id: string) => {
  if (!id) return
  router.push(`/details?id=${id}`)
}
// 如果title 传入说明是搜索页就监视
watch(
  () => props.articleWhere.title,
  () => {
    // 每回值变化就赋值为空数组
    articleList.value = []
    page = 1
    getArticleList()
  }
)
defineExpose({ getArticleList })
</script>

<style scoped lang="scss">
.articleItem {
  width: 100%;
  height: 200px;
  max-width: 900px;
  margin: 0 auto;

  transition: all 0.3s;
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;

  .articleBg {
    width: 40%;
    height: 100%;

    :deep(.v-progressive-image) {
      width: 100%;
      height: 100%;
    }

    :deep(img) {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .articleInfo {
    position: relative;
    width: 60%;
    height: 100%;
    padding: 15px 60px;

    a {
      width: 100%;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 20px;
      color: #4c4948;
      margin-top: 20px;
      text-decoration: none;
    }

    >div {
      color: #858585;

      .flagIcon {
        position: absolute;
        bottom: 20px;
        left: 60px;
      }

      .info {
        width: 90%;
        margin-top: 10px;
        font-size: 14px;
        color: #888;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-height: 1.5;
      }

      .articleType {
        color: #ff7242;
      }

      span {
        align-items: center;
        margin: 10px 0;
      }
    }
  }

  .floatR {
    float: right;
  }

  .floatL {
    float: left;
  }

  &:hover {
    transform: scale(1.05);
  }
}

@media (max-width: 760px) {
  .articleItem {
    height: 200px;

    .floatR,
    .floatL {
      float: none;
    }

    .articleBg {
      width: 100%;
      height: 60%;
    }

    .articleInfo {
      width: 100%;
      height: 40%;
      padding: 0 20px;

      a {
        width: 100%;
        margin-top: 10px;
        font-size: 16px;
        -webkit-line-clamp: 1;
      }

      >div {
        .flagIcon {
          left: 20px;
          bottom: 15px;

          span {
            margin: 5px 0;
            font-size: 12px;
          }
        }

        .info {
          font-size: 12px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 5px 0;
        }

        .articleIcon {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
